import React, { FC, useMemo } from "react";
import { ConfigProvider, Tabs, TabsProps, Tooltip } from "antd";
import dayjs from 'dayjs'
import zh from 'dayjs/locale/zh-cn'
dayjs.locale(zh)
import zh_CN from 'antd/locale/zh_CN'
import XMLBuilder from './demos/xml_builder'
import JSONBuilder from './demos/json_builder'
import TypeBuilder from './demos/type_builder'
import { IStore, connect, getState, locationTo } from "./store";


interface MenuItem<T = any> {
  pathname: string;
  title: string;
  desc?: string;
  com: FC<T>;
}

const menus: MenuItem[] = [
  {
    pathname: '/json_builder',
    title: 'JSON',
    desc: 'JSON构建器',
    com: JSONBuilder,
  },
  {
    pathname: '/xml_builder',
    title: 'XML',
    desc: 'XML构建器',
    com: XMLBuilder,
  },
  {
    pathname: '/type_builder',
    title: 'TYPES',
    desc: 'TypeScript构建器, 根据swaggerjson转ts的interface',
    com: TypeBuilder,
  },
]

const items: TabsProps["items"] = menus.map(m => {
  return {
    key: m.pathname,
    label: <Tooltip title={m.desc}>{m.title}</Tooltip>,
    children: <m.com />
  }
})

const App = ({ pathname }: IStore) => {
  const menu = useMemo(function () {
    const m = menus.find(m => m.pathname === pathname)
    if (!m) {
      const item = menus[0]
      locationTo(item.pathname, item.desc)
    }
    return m
  }, [pathname])

  return (
    <div style={{ padding: 16 }}>
      <ConfigProvider locale={zh_CN}>
        <Tabs activeKey={menu?.pathname} items={items} onChange={locationTo}/>
      </ConfigProvider>
    </div>
  );
};

export default connect(getState)(App)